<template>
    <view>
        <scroll-view class="order_status_box"
                     :scroll-left='scleft'
                     scroll-with-animation
                     show-scrollbar="false"
                     scroll-x>
            <view class="order_status_item"
                  v-for="(item,index) in orderSatatusList"
                  :class="{'active': queryData.status == item.id }"
                  @click="itemClick(item,index)"
                  :key="index">{{ item.name }}</view>
        </scroll-view>

        <view v-if="orderDataList.length>0"
              class="order_list padding_box">
            <view class="container_box"
                  v-for="(item,index) in orderDataList"
                  @click="$goto('push', '/pages/orderDetails/orderDetails?orderId=' + item.id + '&type=orderList')"
                  :key="index">
                <view class="top_box u-flex u-row-between">
                    <view class="left_box">订单号：{{ item.items[0].orderSn }}</view>
                    <view class="success"
                          v-if="showSuccess(item.status)">{{ item.status | statusFilter }}</view>
                    <view class="refund"
                          v-if="showLoading(item.status)">{{ item.status | statusFilter }}</view>
                </view>
                <view class="info_box ">
                    <scroll-view v-if="item.items.length > 1"
                                 class="children_box order_info"
                                 :scroll-left='scleft'
                                 scroll-with-animation
                                 show-scrollbar="false"
                                 scroll-x>
                        <view class="u-flex ">
                            <image class="order_img"
                                   v-for="(item1, index1) in item.items"
                                   :key="index1"
                                   :src="item1.productPic"
                                   mode="" />
                        </view>
                    </scroll-view>
                    <view v-else
                          class="order_info">
                        <image class="order_img"
                               :src="item.items[0].productPic"
                               mode="" />
                        <view class="u-flex-col">
                            <view class="text_14_333">{{ item.items[0].productName }}</view>
                            <view v-if="item.items"
                                  class="u-flex-col">
                                <view class="text_12_999"
                                      style="margin-top:10rpx;"
                                      v-for="(item1,index1) in skuDataList[index]"
                                      :key="index1">
                                    <!-- {{ orderData.specialSpec[index].name }}：  -->
                                    {{ item1.value }}
                                </view>
                            </view>
                            <!-- <view class="details_info_text">一周两节课，{{ item.weekStr.join(',') }} 上课</view> -->
                        </view>
                    </view>

                    <view class="u-flex-col">
                        <view class=" text_14_333">￥ <span class="order_cost">{{ item.items[0].payAmount / 100 }}</span></view>
                        <view class="text_12_999"
                              style="margin-top:10rpx;text-align:center;">{{ '实付款' }}</view>
                    </view>
                </view>
                <view class="text_12_999">
                    {{ item.updateTime }}
                </view>
            </view>
            <view class="load_box"
                  v-if="orderDataList.length >= 3">
                <u-loadmore :status="loadingStatus" />
            </view>
        </view>
        <view v-else>
            <meu-empty top="50vh"
                       tipText="暂无订单信息" />
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            queryData: {
                status: '',
                pageSize: 5,
                pageNum: 1,
            },
            total: 0,
            loadingStatus: 'loadmore',
            orderDataList: [
            ],
            orderSatatusList: [
                { id: '', name: '全部' }, { id: 1000, name: '已完成' }, { id: 20, name: '待付款' },
                { id: 70, name: '退款中' }, { id: 80, name: '调课中' }, { id: 73, name: '退款成功' },
                { id: 81, name: '调课成功' },
            ],
            skuDataList: [],
            scleft: 0,
            first: 0,
        }
    },
    computed: {

    },
    filters: {
        statusFilter(status) {
            switch (status) {
                case 1000:
                    return '支付成功'
                case 73:
                    return '退款成功'
                case 71:
                    return '退款处理中'
                case 81:
                    return '调课成功'
                case 20:
                    return '待付款'
                case 70:
                    return '退款中'
                case 80:
                    return '调课中'
            }
        }
    },
    watch: {
        'queryData.status': {
            handler(newV) {
                this.orderDataList = []
                this.queryData.pageSize = 5
                this.queryData.pageNum = 1
                this.getOrderList()
            }
        },

    },
    onReachBottom() {
        let length = this.orderDataList.length;
        console.log("length", length)
        if (length <= this.total) {
            this.loadingStatus = 'loading'
            this.queryData.pageSize += 5
            this.getOrderList()
        }

    },
    onShow() {
        console.log('?>>>?>>>>>>', this.first)
        if (this.first != 0) {
            this.getOrderList()
        }
    },
    onHide() {
        this.first = 1
    },
    onLoad(option) {
        let _this = this
        if (option.status) {
            this.queryData.status = option.status
            if (option.status == 70) {
                setTimeout(() => {
                    _this.scleft = this.$systemInfo.windowWidth * 0.40
                }, 300);
            }
        } else {
            this.getOrderList()
        }
    },
    methods: {
        getOrderList() {
            this.$api.getOrderList(this.queryData, res => {
                if (res.code == 0) {
                    let arr = []
                    // let Arr = []
                    res.data.list.forEach(ele => {
                        if (ele.items[0] && ele.items[0].skuData) {
                            // Arr.push(ele.items[0])
                            arr.push(JSON.parse(ele.items[0].skuData))
                        }
                    });
                    this.skuDataList = arr
                    this.total = res.data.total
                    this.orderDataList = res.data.list
                }
                if (res.data.list.length >= this.total) {
                    this.loadingStatus = 'nomore'
                } else {
                    this.loadingStatus = 'loadmore'
                }
            });
        },
        showSuccess(status) {
            if (status == 1000 || status == 73 || status == 81) {
                return true
            }
            return false
        },
        showLoading(status) {
            if (status == 20 || status == 70 || status == 80 || status == 71) {
                return true
            }
            return false
        },
        itemClick(item, index) {
            this.queryData.status = item.id
            if (index > 2) {
                this.scleft = (index - 2) * this.$systemInfo.windowWidth * 0.45
            } else {
                this.scleft = '0'
            }
        },
    }
}
</script>

<style lang="scss" scoped>
.order_status_box {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    box-sizing: border-box;
    padding: 15rpx 30rpx;
    z-index: 11;
    background-color: #fff;
    white-space: nowrap;
    // overflow-x: auto;
    .order_status_item {
        display: inline-block;
        padding: 15rpx 50rpx;
        background: #f5f5f5;
        border: 1rpx solid #f5f5f5;
        border-radius: 16rpx;
        transition: all 0.3s;
        &.active {
            color: #63b9f2;
            background: #f0f9ff;
            border: 1rpx solid #63b9f2;
        }
    }
    .order_status_item + .order_status_item {
        margin-left: 16rpx;
    }
}
.order_list {
    position: relative;
    top: 100rpx;
}
.top_box {
    padding-bottom: 30rpx;
    border-bottom: 1rpx solid #f5f5f5;
    font-size: 28rpx;
    .left_box {
        color: #333;
    }

    .success {
        color: #63b9f2;
    }
    .refund {
        color: #eb4b4b;
    }
    .info {
        color: #999;
    }
}
.order_cost {
    font-size: 36rpx;
}
.info_box {
    margin: 30rpx 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}
.order_info {
    display: flex;
    flex-direction: row;
}
.order_img {
    width: 140rpx;
    height: 140rpx;
    flex-shrink: 0;
    margin-right: 16rpx;
    border-radius: 16rpx;
}
.container_box + .container_box {
    margin-top: 30rpx;
}

.children_box {
    position: relative;
    box-sizing: border-box;
    width: 82%;
}
</style>
